<template>
  <div class="goods-list">
    <div
      class="goods-item"
      v-for="(item, index) in goodsList"
      :key="index"
      @click="goto(item)"
    >
      <img
        :src="item.img || item.image || item.show.img"
        alt=""
        @load="uploadLoad"
      />
      <div class="info">
        <p>{{ item.title }}</p>
        <span class="price">{{ item.price }}</span>
        <span class="num">
          <i class="iconfont icon-xing"></i>
          {{ item.cfav }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goodsList: Array
  },
  data() {
    return {}
  },
  methods: {
    // 监听图片加载
    uploadLoad() {
      // 事件总线
      this.$bus.$emit('itemImageLoad')
    },
    // 跳转到详情页
    goto(data) {
      window.sessionStorage.setItem('id', data.iid)
      this.$router.push('/detail')
    }
  },
  computed: {}
}
</script>

<style lang="less" scoped>
.goods-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  position: relative;

  .goods-item {
    flex: 40%;
    margin-bottom: 40px;
    img {
      width: 100%;
      border-radius: 5px;
    }
    .info {
      width: 45%;
      position: absolute;
      text-align: center;
      font-size: 12px;
      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .price {
        color: var(--color-a);
        margin-right: 5px;
      }
      .num {
        i {
          margin-right: -5px;
        }
      }
    }
  }
  .goods-item:nth-child(odd) {
    margin-right: 10px;
  }
}
</style>
